<template>
  <view class="container">
    <!-- 1. 突发事件类型选择 -->
    <view class="item" @click="toggleExpand('type')">
      <view class="item-header">
        <text class="item-title">1. 突发事件类型选择（单选）</text>
        <image
            :src="expandStatus.type ? '/static/pg6.png' : '/static/pg7.png'"
            class="arrow"
            mode="widthFix"
        />
      </view>
      <view v-show="expandStatus.type" class="item-content">
        <radio-group v-model="formData.incidentType">
          <label class="radio-item" v-for="(type, index) in incidentTypes" :key="index">
            <radio :value="type.value" />{{ type.label }}
          </label>
        </radio-group>
      </view>
    </view>

    <!-- 2. 选择对口心理中心教师 -->
    <view class="item" @click="toggleExpand('teacher')">
      <view class="item-header">
        <text class="item-title">2. 请选择对口心理中心教师（单选）</text>
        <image
            :src="expandStatus.teacher ? '/static/pg6.png' : '/static/pg7.png'"
            class="arrow"
            mode="widthFix"
        />
      </view>
      <view v-show="expandStatus.teacher" class="item-content">
        <picker
            :range="teachers"
            :range-key="'name'"
            v-model="selectedTeacherIndex"
            @change="onTeacherChange"
        >
          <view class="picker-display">
            {{ selectedTeacherIndex !== null ? teachers[selectedTeacherIndex].name : '请选择教师' }}
          </view>
        </picker>
      </view>
    </view>

    <!-- 3. 选定学生 -->
    <view class="item" @click="toggleExpand('student')">
      <view class="item-header">
        <text class="item-title">3. 选定学生</text>
        <image
            :src="expandStatus.student ? '/static/pg6.png' : '/static/pg7.png'"
            class="arrow"
            mode="widthFix"
        />
      </view>
      <view v-show="expandStatus.student" class="item-content">
        <view class="form-group">
          <text class="form-label">姓名：</text>
          <input
              type="text"
              v-model="formData.studentName"
              placeholder="请输入学生姓名"
              class="form-input"
          />
        </view>
        <view class="form-group">
          <text class="form-label">学号：</text>
          <input
              type="text"
              v-model="formData.studentId"
              placeholder="请输入学号"
              class="form-input"
          />
        </view>
        <view class="form-group">
          <text class="form-label">班级：</text>
          <input
              type="text"
              v-model="formData.studentClass"
              placeholder="请输入班级"
              class="form-input"
          />
        </view>
      </view>
    </view>

    <!-- 4. 突发事件概述 -->
    <view class="item" @click="toggleExpand('overview')">
      <view class="item-header">
        <text class="item-title">4. 突发事件概述</text>
        <button class="view-record-btn" @click.stop="viewRecord('overview')">查看记录</button>
        <image
            :src="expandStatus.overview ? '/static/pg6.png' : '/static/pg7.png'"
            class="arrow"
            mode="widthFix"
        />
      </view>
      <view v-show="expandStatus.overview" class="item-content">
        <textarea
            v-model="formData.incidentOverview"
            placeholder="请输入突发事件概述"
            class="text-area"
            auto-height
        />
      </view>
    </view>

    <!-- 5. 学生目前情况 -->
    <view class="item" @click="toggleExpand('currentSituation')">
      <view class="item-header">
        <text class="item-title">5. 学生目前情况</text>
        <button class="view-record-btn" @click.stop="viewRecord('currentSituation')">查看记录</button>
        <image
            :src="expandStatus.currentSituation ? '/static/pg6.png' : '/static/pg7.png'"
            class="arrow"
            mode="widthFix"
        />
      </view>
      <view v-show="expandStatus.currentSituation" class="item-content">
        <textarea
            v-model="formData.currentSituation"
            placeholder="请输入学生目前情况"
            class="text-area"
            auto-height
        />
      </view>
    </view>

    <!-- 6. 风险分析研判 -->
    <view class="item" @click="toggleExpand('riskAnalysis')">
      <view class="item-header">
        <text class="item-title">6. 风险分析研判</text>
        <button class="view-record-btn" @click.stop="viewRecord('riskAnalysis')">查看记录</button>
        <image
            :src="expandStatus.riskAnalysis ? '/static/pg6.png' : '/static/pg7.png'"
            class="arrow"
            mode="widthFix"
        />
      </view>
      <view v-show="expandStatus.riskAnalysis" class="item-content">
        <textarea
            v-model="formData.riskAnalysis"
            placeholder="请输入风险分析研判"
            class="text-area"
            auto-height
        />
      </view>
    </view>

    <!-- 7. 已采取的措施及当前状况 -->
    <view class="item" @click="toggleExpand('measures')">
      <view class="item-header">
        <text class="item-title">7. 已采取的措施及当前状况</text>
        <button class="view-record-btn" @click.stop="viewRecord('measures')">查看记录</button>
        <image
            :src="expandStatus.measures ? '/static/pg6.png' : '/static/pg7.png'"
            class="arrow"
            mode="widthFix"
        />
      </view>
      <view v-show="expandStatus.measures" class="item-content">
        <textarea
            v-model="formData.measures"
            placeholder="请输入已采取的措施及当前状况"
            class="text-area"
            auto-height
        />
      </view>
    </view>

    <!-- 8. 学院建议 -->
    <view class="item" @click="toggleExpand('suggestion')">
      <view class="item-header">
        <text class="item-title">8. 学院建议</text>
        <button class="view-record-btn" @click.stop="viewRecord('suggestion')">查看记录</button>
        <image
            :src="expandStatus.suggestion ? '/static/pg6.png' : '/static/pg7.png'"
            class="arrow"
            mode="widthFix"
        />
      </view>
      <view v-show="expandStatus.suggestion" class="item-content">
        <textarea
            v-model="formData.suggestion"
            placeholder="请输入学院建议"
            class="text-area"
            auto-height
        />
      </view>
    </view>

    <!-- 审批流程（可折叠） -->
    <view class="item" @click="toggleExpand('approval')">
      <view class="item-header">
        <text class="item-title">审批流程</text>
        <image
            :src="expandStatus.approval ? '/static/pg6.png' : '/static/pg7.png'"
            class="arrow"
            mode="widthFix"
        />
        <view v-show="expandStatus.approval" class="item-content">
        <textarea
            v-model="formData.approval"
            placeholder="无"
            class="text-area"
            auto-height
        />
        </view>
      </view>
      </view>

    <!-- 底部按钮 -->
    <view class="CSGO"></view>
    <view class="btn-group">
      <button class="btn submit-btn" @click="submittedApplication">提交审批</button>
    </view>
    <view class="btn-group">
      <button class="btn save-btn" @click="saveApplication">保存草稿</button>
    </view>

    <!-- 保存提示 -->
    <view class="save-hint">已为您实时保存数据</view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 控制每个条目的展开/收起状态（新增approval字段控制审批流程折叠）
const expandStatus = ref({
  type: false,
  teacher: false,
  student: false,
  overview: false,
  currentSituation: false,
  riskAnalysis: false,
  measures: false,
  suggestion: false,
  approval: false // 审批流程折叠状态
});

// 表单数据
const formData = reactive({
  incidentType: '',
  selectedTeacher: null,
  studentName: '',
  studentId: '',
  studentClass: '',
  incidentOverview: '',
  currentSituation: '',
  riskAnalysis: '',
  measures: '',
  suggestion: ''
});

// 突发事件类型选项
const incidentTypes = [
  { label: '心理危机', value: 'psychological' },
  { label: '意外伤害', value: 'accident' },
  { label: '疾病突发', value: 'illness' },
  { label: '其他事件', value: 'other' }
];

// 教师列表
const teachers = [
  { id: 1, name: '教师A' },
  { id: 2, name: '教师B' },
  { id: 3, name: '教师C' },
  { id: 4, name: '孙汀勇' }
];

// 选中的教师索引
const selectedTeacherIndex = ref(null);

// 切换展开状态（通用方法，支持审批流程的折叠切换）
const toggleExpand = (key) => {
  expandStatus.value[key] = !expandStatus.value[key];
};

// 教师选择变化
const onTeacherChange = (e) => {
  selectedTeacherIndex.value = e.detail.value;
  formData.selectedTeacher = teachers[selectedTeacherIndex.value];
};

// 查看记录
const viewRecord = (type) => {
  console.log(`查看${type}的记录`);
  uni.showToast({
    title: `查看${getRecordTypeName(type)}记录`,
    icon: 'none'
  });
};

// 获取记录类型名称
const getRecordTypeName = (type) => {
  const typeMap = {
    overview: '突发事件概述',
    currentSituation: '学生目前情况',
    riskAnalysis: '风险分析研判',
    measures: '已采取的措施及当前状况',
    suggestion: '学院建议'
  };
  return typeMap[type] || '';
};

// 撤销申请
const cancelApplication = () => {
  uni.showModal({
    title: '提示',
    content: '确定要撤销申请吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showToast({
          title: '申请已撤销',
          icon: 'success'
        });
      }
    }
  });
};
</script>

<style scoped>
.container {
  padding: 16rpx;
  background-color: #f5f5f5;
  min-height: 115vh;
  box-sizing: border-box;
}

.item {
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 16rpx;
  flex-direction: row;
}

.item-title {
  font-size: 28rpx;
  color: #333;
  flex: 1;
  line-height: 1.5;
}

.arrow {
  width: 36rpx;
  height: 36rpx;
  transition: transform 0.3s ease;
}

.item-content {
  padding: 16rpx;
  border-top: 1rpx solid #f0f0f0;
  animation: fadeIn 0.3s ease;
}

/* 审批流程内容区域样式调整 */
.approval-content {
  padding-top: 0;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10rpx); }
  to { opacity: 1; transform: translateY(0); }
}

.radio-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  font-size: 26rpx;
}

.radio-item radio {
  margin-right: 12rpx;
  transform: scale(0.8);
}

.picker-display {
  padding: 16rpx;
  background-color: #f9f9f9;
  border-radius: 6rpx;
  font-size: 26rpx;
  color: #666;
}

.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.form-label {
  font-size: 26rpx;
  color: #333;
  width: 120rpx;
}

.form-input {
  flex: 1;
  padding: 14rpx;
  border: 1rpx solid #ddd;
  border-radius: 6rpx;
  font-size: 26rpx;
}

.text-area {
  width: 100%;
  border: 1rpx solid #ddd;
  border-radius: 6rpx;
  padding: 14rpx;
  font-size: 26rpx;
  line-height: 1.6;
  box-sizing: border-box;
}

.view-record-btn {
  background-color: #e8f4fd;
  color: #1677ff;
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  margin-right: 10rpx;
  border-radius: 4rpx;
  height: auto;
  line-height: 1.4;
}
.btn-group {
  padding: 0 16rpx 20rpx;
  display: flex;
  justify-content: center;
}

.submit-btn {
  background-color: #1677ff;
  color: #fff;
  width:100%;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  border-radius: 10rpx;
  position:fixed;
  bottom:60px;
  z-index: 2;
}
.save-btn {
  background-color:white;
  color:#1a1a1a;
  width:100%;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  border-radius: 10rpx;
  position:fixed;
  bottom:10px;
  border-style:solid;
  border-width: 1px;
  border-color: #1890ff;
  z-index: 2;
}

.save-hint{
  color:#808080;
  font-size: 26rpx;
  position:absolute;
  left: 120px;
}
.CSGO{
  width:100%;
  height: 110px;
  left:0px;
  background-color:#f5f5f5;
  position: fixed;
  bottom: 0px;
  z-index: 1;
}
</style>